<template>
  <div>
    <van-tabbar
       active-color="#FF734C"
       inactive-color="#232628"
       route
      ><!-- 第一个选中颜色 第二个未选中颜色 第三个是路由模式颜色会根据高切换 -->
      <van-tabbar-item to="/home" icon="jingdong1" icon-prefix="icon">首页</van-tabbar-item>
      <van-tabbar-item to="/cate" icon="ziyuan114 " icon-prefix="icon">分类</van-tabbar-item>
      <!-- :badge="$store.state.cart.items.length" 在vuex库里面有一个items -->
      <van-tabbar-item to="/cart" :badge="$store.state.cart.items.length" icon="xiazai1 " icon-prefix="icon">购物车</van-tabbar-item>
      <van-tabbar-item to="/user" icon="wode-copy " icon-prefix="icon">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-tabbar{// 穿透
  .icon{
    font-size: 22px;// 自定义图标22px
  }
}
</style>
